<template>
  <view class="point-log-layout">
    <my-header title="钻石账单"></my-header>
    <my-content class="content">
      <view class="point-log-content">
        <view class="point-log-top">
          <view class="left">钻石明细</view>
          <my-tab start v-model="mode" :tab-list="tabData"></my-tab>
        </view>
        <scroll-view
          class="scroll"
          refresher-background=""
          :refresher-triggered="refreshStatus"
          @refresherrefresh="refresh"
          :refresher-enabled="true"
          scroll-y="true"
          @scrolltolower="lower"
        >
          <view class="balance_box">
            <view class="balance_item item-bg" v-for="item in balanceData" :key="item.id">
              <view class="top">
                <view class="remark">{{ item.remark }}</view>
                <view class="amount add" v-if="item.mode == 1">+{{ item.amount }}</view>
                <view class="amount remove" v-if="item.mode == 2">{{ item.amount }}</view>
              </view>
              <view class="bottom">
                <view class="time">{{ item.created_at }}</view>
                <view class="aftet_amount">余额：{{ item.after_amount }}</view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </my-content>
  </view>
</template>

<script>
import api from '../../api/index.js'
export default {
  data() {
    return {
      mode: '',
      balanceData: [],
      tabData: [
        { id: '', title: '全部' },
        { id: 1, title: '收入' },
        { id: 2, title: '支出' },
      ],
      last_page: 0,
      page: 1,
      refreshStatus: false,
    }
  },
  onLoad() {
    this.getBalance(1)
  },
  onShow() {},
  watch: {
    mode() {
      this.page = 1
      this.getBalance(2)
    }
  },
  methods: {
    changeTab(id) {
      if (this.mode != id) {
        this.mode = id
        this.page = 1
        this.getBalance(2)
      }
    },
    lower() {
      if (this.page >= this.last_page) {
        this.show('没有更多数据了')
        return
      }
      this.page++
      this.getBalance(1)
    },
    refresh() {
      this.refreshStatus = true
      this.page = 1
      this.getBalance(2)
    },
    getBalance(type) {
      uni.showLoading({
        title: '数据加载中',
      })
      api.pointLogs
        .index({ page: this.page, mode: this.mode })
        .then((res) => {
          if (res.code === 200) {
            uni.hideLoading()
            if (type == 1) {
              this.balanceData = this.balanceData.concat(res.data.data)
            } else {
              this.balanceData = res.data.data
            }

            this.last_page = res.data.last_page
            this.refreshStatus = false
          }
        })
        .catch((error) => {
          console.log(error)
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.point-log-layout {
  height: 100vh;
  background: url("https://www.dingxians.cn/upload/images/common/bg.png") 100%/100%;
 
}
.content {
  height: 100vh;
  overflow: hidden;
  .point-log-content {
		box-sizing: border-box;
    height: 100%;
		width: 710rpx;
		margin: 20rpx auto 0;
		overflow: hidden;
    display: flex;
    flex-direction: column;
		padding: 20rpx;

  }
  .point-log-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
		padding-bottom: 20rpx;
    .left {
      color: white;
    }
    .tab {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 80rpx;
      font-size: 30rpx;
      /* position: fixed;
			top: 0;
			width: 100%;
			left: 0;
			z-index: 100; */
      .tab_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
				width: 112rpx;
				height: 42rpx;
				font-size: 26rpx;
				color: #808080;
        .tab_border {
          width: 50rpx;
          height: 5rpx;
        }
        &.active {
					background-image: url('https://www.dingxians.cn/upload/images/box/tab-bg-active.png');
          background-size: 100% 100%;
					.tab_border {
            background-color: #a361f6;
          }
          .tab_title {
            font-weight: bold;
            color: #DED000;
          }
        }
      }
    }
  }

  .scroll {
    /* position:fixed;
			top: 100rpx; */
    flex: 1;
    margin: 0 auto;
    overflow: hidden;
    &::-webkit-scrollbar {
      display: none;
    }
  }

  .balance_box {
    display: flex;
    flex-direction: column;
    /* height: calc(100vh - 100rpx); */
    // margin-top: 180rpx;
    color: white;
    .balance_item {
      display: flex;
      flex-direction: column;
      height: 100rpx;
      padding: 20rpx;
      box-sizing: border-box;
      justify-content: space-around;
      font-size: 30rpx;
      margin-bottom: 30rpx;

      .top,
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .time {
          color: #808080;
          font-size: 24rpx;
        }
        .amount {
          font-size: 36rpx;
          display: flex;
          align-items: center;
          &.add {
            color: #ee5093;
          }
          &.remove {
            color: #E20404;
          }
        }
        .aftet_amount {
          color: #808080;
        }
      }
    }
  }
}
</style>
